<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{
              padding-top: 1.5rem;
          }
          .header{
                width: 94%;
                height: 2.5rem;
                line-height: 2.5rem;
                padding: 0.5rem 0.8rem;
                text-align: center;
                position: fixed;
                top:1.5rem;
                background-color: #fff;
            }
            .header_img{
              width: 6%;
              height: 45%;
              float: left;
              margin-top: 0.5rem;
            }
          .header_img img{
            width: 100%;
            height: 100%;
          }
          .header h3{
            line-height: 3rem;
            width: 90%;
            text-align: center;
          }
          .mouths{
            width: 100%;
            height: 1.5rem;
            padding: 0.3rem 0rem 0rem 0rem;
            background-color: rgb(242, 242, 242, 0.5);
            margin-top: 3rem;
          }
          .mouth{
            background-color: #fff;
            height: 1.5rem;
            width: 94%;
            padding: 0.5rem 0.8rem;
            line-height: 1.5rem;
            color: #ccc;
            font-size:0.9rem;
            font-weight: bold;
          }
          .mouth span{
            display: inline-block;
            width: 18%;
            text-align: center;
          }
          .span{
            background-color: #fec531;
            color: #fff;
            border-radius: 1.5rem;
          }
          .nav{
            width: 94%;
            padding: 1rem 0.8rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
          }
          .nav_one{
            width: 48%;
            margin-top: 1rem;
            height: 14.5rem;
          }
          .one_img{
            width: 100%;
            height: 9rem;
          }
          .one_img img{
            width: 100%;
            height: 100%;
          }
      </style>
  </head>
  <body>
      <div class="header">
        <div class="header_img">
          <img src="../image/u18.png" alt="" onclick="closewin()">
        </div>
        <h3>官方商城</h3>
      </div>
      <div class="mouths">
        <div class="mouth" id="fic_list">
          <span>孕期</span>
          <span>0-12个月</span>
          <span class="span">1-3岁</span>
          <span>3岁+</span>
        </div>
      </div>
      <div class="nav" id="prolist" >
        <!-- <div class="nav_one">
          <div class="one_img">
            <img src="../image/a25.png" alt="">
          </div>
          <h5 style="margin-top:0.5rem;padding-left:0.3rem">液晶电子涂鸦板</h5>
          <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">触屏即图一键消除</p>
          <p style="color:#fec531;font-size:1.1rem;margin-top0.5rem;">￥79</p>
        </div> -->

      </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
  var page = 1;
  var pagesize = 10;
  var fic = 0
      apiready = function(){
        get_fic()//获取产品分类
        get_prolist()//获取产品列表

      };

    function get_prolist() {

      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '努力加载中...',
          text: '先喝杯茶...',
          modal: false
      });

      var html =''
      var obj = $api.byId('prolist');

      api.ajax({
          url: SITE_URL+'product_api/index/get_prolist',
          method: 'post',
          data: {
              values: {
                  page: page,
                  pagesize:pagesize,
                  shopfic:fic
              }
          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200){
              if(ret.data.length){
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<div class="nav_one" onclick="opens('+dat.id+')">'
                  html +='<div class="one_img">'
                  html +='<img src="'+dat.img_url+'" alt="">'
                  html +='</div>'
                  html +='<h5 style="margin-top:0.5rem;padding-left:0.3rem">'+dat.pro_name+'</h5>'
                  html +='<p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">'+dat.pro_title+'</p>'
                  html +='<p style="color:#fec531;font-size:1.1rem;margin-top0.5rem;">￥'+dat.price+'</p>'
                  html +='</div>'
                }
                $api.append(obj, html);

              }
            }else{
              msgcode('暂无更多产品推荐')
            }
            api.hideProgress();

              //alert( JSON.stringify( ret ) );
          } else {
            api.hideProgress();
              //alert( JSON.stringify( err ) );
          }
      });

    }

function opens(id) {
  api.openWin({
      name: 'prolist',
      url: './prolist.html',
      pageParam: {
                  id: id
              }
  });
}

    function get_fic() {
      var html = ''
      var obj = $api.byId('fic_list');

      api.ajax({
          url: SITE_URL+'product_api/profic/get_all',
          method: 'post',
          data:{

          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200){
              if(ret.data.length){
                html +='<span class="span fic" onclick="set_fic(this,0)">全部</span>'
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<span class="fic" onclick="set_fic(this,'+dat.id+')">'+dat.name+'</span>'
                }
                $api.html(obj, html);
                page+=1
              }
            }else{
              $("#fic_list").css('display','none')
            }
              //alert( JSON.stringify( ret ) );
          } else {
            msgcode('请检查网络连接')
            //  alert( JSON.stringify( err ) );
          }
      });

    }

    function set_fic(self,keys) {
      fic = keys
      document.getElementById('prolist').innerHTML=''
      page = 1
      var fic_list = document.getElementsByClassName('fic')
      for (var i = 0; i < fic_list.length; i++) {
        $(fic_list[i]).removeClass('span')
      }
      $(self).addClass('span')
      get_prolist()
    }
  </script>
  </html>
